<template>
  <div style="padding: 10px">
    <d-details :detailsConfig="detailsConfig" v-model="data"></d-details>
    <div>不同尺寸</div>
    <d-details :detailsConfig="detailsConfig" v-model="data" size="small"></d-details>
    <div>不同数量</div>
    <d-details
      :detailsConfig="detailsConfig"
      v-model="data"
      :column="2"
      border
      label-width="80"></d-details>
    <div>排列方向-不显示冒号</div>
    <d-details
      :detailsConfig="detailsConfig"
      v-model="data"
      :column="2"
      :isColon="false"
      direction="vertical"></d-details>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const data = ref({
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  })
  const detailsConfig = ref([
    { label: '姓名', prop: 'name', value: '' },
    { label: '日期', prop: 'date', value: '' },
    { label: '地址', prop: 'address', value: '' }
  ])
</script>
